<template>
  <div class="month_details">
    <div class="back">
      <span @click="$router.back(-1)">
        <i class="icon ic_back mr8"></i>
      返回
      </span>
      工作简报 > 本周详情
    </div>
    <div class="content">
      <vuescroll :ops="ops">
        <!--      -->
        <div class="content_middle">
          <div class="left">
            <div class="tips">
              <span></span>
              公司本周{{projectProgress.completeNum}}个项目完结，{{projectProgress.warningNum}}个项目出现异常，剩余{{projectProgress.nowNum}}个项目都在如火如荼的进行着
            </div>
            <div class="content">
              <div class="title">
                对比上月，公司项目新进展如下
              </div>
              <ul class="sub_title_list">
                <li>项目简称</li>
                <li>上周进度</li>
                <li>本周进度</li>
                <li>进展</li>
              </ul>
              <div class="scroll-box">
                <vuescroll :ops="ops2">
                  <ul class="info-list" v-for="(data,index) in projectProgress.list" :key="index">
                    <li>{{data.shortName}}</li>
                    <li>{{data.previousProgress}}％</li>
                    <li>{{data.nowProgress}}％</li>
                    <li>
                      <i v-if="data.nowProgress>data.previousProgress" class="top_icon"></i>
                      <i v-if="data.nowProgress<data.previousProgress" class="bottom_icon"></i>
                      <i v-if="data.nowProgress==data.previousProgress" class="middle_icon"></i>
                    </li>
                  </ul>
                </vuescroll>
              </div>
            </div>
          </div>
          <div class="right">
            <div v-if="this.$store.state.userInfo.level==1" class="board mb16">
              <div class="title">
                公司情况周总结
              </div>
              <ul class="sub_title_list">
                <li>指标</li>
                <li>上周</li>
                <li>本周</li>
                <li>升降情况</li>
              </ul>
              <ul class="info_list">
                <li>任务量</li>
                <li>{{companySummary.lastWeekTaskNum}}</li>
                <li>{{companySummary.taskNum}}</li>
                <li>
                  <i v-if="companySummary.taskNum>companySummary.lastWeekTaskNum" class="top_icon"></i>
                  <i v-if="companySummary.taskNum<companySummary.lastWeekTaskNum" class="bottom_icon"></i>
                  <i v-if="companySummary.taskNum==companySummary.lastWeekTaskNum" class="middle_icon"></i>
                </li>
              </ul>
              <ul class="info_list">
                <li>完成率</li>
                <li>{{companySummary.lastWeekCompleteRate}}</li>
                <li>{{companySummary.completeRate}}</li>
                <li>
                  <i v-if="companySummary.completeRate>companySummary.lastWeekCompleteRate" class="top_icon"></i>
                  <i v-if="companySummary.completeRate<companySummary.lastWeekCompleteRate" class="bottom_icon"></i>
                  <i v-if="companySummary.completeRate==companySummary.lastWeekCompleteRate" class="middle_icon"></i>
                </li>
              </ul>
              <ul class="info_list">
                <li>逾期任务</li>
                <li>{{companySummary.lastWeekOverdueNum}}</li>
                <li>{{companySummary.overdueNum}}</li>
                <li>
                  <i v-if="companySummary.overdueNum>companySummary.lastWeekOverdueNum" class="top_icon"></i>
                  <i v-if="companySummary.overdueNum<companySummary.lastWeekOverdueNum" class="bottom_icon"></i>
                  <i v-if="companySummary.overdueNum==companySummary.lastWeekOverdueNum" class="middle_icon"></i>
                </li>
              </ul>
              <ul class="info_list">
                <li>延期量</li>
                <li>{{companySummary.lastWeekDelayNum}}</li>
                <li>{{companySummary.delayNum}}</li>
                <li>
                  <i v-if="companySummary.delayNum>companySummary.lastWeekDelayNum" class="top_icon"></i>
                  <i v-if="companySummary.delayNum<companySummary.lastWeekDelayNum" class="bottom_icon"></i>
                  <i v-if="companySummary.delayNum==companySummary.lastWeekDelayNum" class="middle_icon"></i>
                </li>
              </ul>
              <div class="tips">
                <div class="tips-inner">
                  <i></i>无
                </div>
              </div>
            </div>
            <div  class="board">
              <div class="title">
                个人情况周总结
              </div>
              <ul class="sub_title_list">
                <li>指标</li>
                <li>上周</li>
                <li>本周</li>
                <li>升降情况</li>
              </ul>
              <ul class="info_list">
                <li>任务量</li>
                <li>{{userSummary.lastWeekTaskNum}}</li>
                <li>{{userSummary.taskNum}}</li>
                <li>
                  <i v-if="userSummary.taskNum>userSummary.lastWeekTaskNum" class="top_icon"></i>
                  <i v-if="userSummary.taskNum<userSummary.lastWeekTaskNum" class="bottom_icon"></i>
                  <i v-if="userSummary.taskNum==userSummary.lastWeekTaskNum" class="middle_icon"></i>
                </li>
              </ul>
              <ul class="info_list">
                <li>完成率</li>
                <li>{{userSummary.lastWeekCompleteRate}}</li>
                <li>{{userSummary.completeRate}}</li>
                <li>
                  <i v-if="userSummary.completeRate>userSummary.lastWeekCompleteRate" class="top_icon"></i>
                  <i v-if="userSummary.completeRate<userSummary.lastWeekCompleteRate" class="bottom_icon"></i>
                  <i v-if="userSummary.completeRate==userSummary.lastWeekCompleteRate" class="middle_icon"></i>
                </li>
              </ul>
              <ul class="info_list">
                <li>逾期任务</li>
                <li>{{userSummary.lastWeekOverdueNum}}</li>
                <li>{{userSummary.overdueNum}}</li>
                <li>
                  <i v-if="userSummary.overdueNum>userSummary.lastWeekOverdueNum" class="top_icon"></i>
                  <i v-if="userSummary.overdueNum<userSummary.lastWeekOverdueNum" class="bottom_icon"></i>
                  <i v-if="userSummary.overdueNum==userSummary.lastWeekOverdueNum" class="middle_icon"></i>
                </li>
              </ul>
              <ul class="info_list">
                <li>延期量</li>
                <li>{{userSummary.lastWeekDelayNum}}</li>
                <li>{{userSummary.delayNum}}</li>
                <li>
                  <i v-if="userSummary.delayNum>userSummary.lastWeekDelayNum" class="top_icon"></i>
                  <i v-if="userSummary.delayNum<userSummary.lastWeekDelayNum" class="bottom_icon"></i>
                  <i v-if="userSummary.delayNum==userSummary.lastWeekDelayNum" class="middle_icon"></i>
                </li>
              </ul>
              <div class="tips">
                <div class="tips-inner">
                  <i></i>无
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 管辖项目情况周总结-->
        <div class="content_bottom" v-if="this.$store.state.userInfo.manager">
          <div class="title">
            管辖项目情况周总结
          </div>
          <ul class="sub_title_list">
            <li>项目简称</li>
            <li>上周进度</li>
            <li>本周进度</li>
            <li>进展</li>
            <li>要求完成任务</li>
            <li>实际完成任务</li>
            <li>逾期完成</li>
          </ul>
          <ul class="info-list" v-for="(data,index) in projectProgressByUser.list" :key="index">
            <li>{{data.shortName}}</li>
            <li>{{data.previousProgress}}％</li>
            <li>{{data.nowProgress}}％</li>
            <li>
              <i v-if="data.nowProgress>data.previousProgress" class="top_icon"></i>
              <i v-if="data.nowProgress<data.previousProgress" class="bottom_icon"></i>
              <i v-if="data.nowProgress==data.previousProgress" class="middle_icon"></i>
            </li>
            <li>{{data.taskNum}}</li>
            <li>{{data.completeTaskNum}}</li>
            <li>{{data.overdueCompleteTaskNum}}</li>
          </ul>
        </div>
      </vuescroll>
    </div>
  </div>
</template>

<script>
  import vuescroll from 'vuescroll'

  export default {
    name: "",
    components: {
      vuescroll
    },
    data() {
      return {
        ops: {
          vuescroll: {
            wheelDirectionReverse: false,//true：横向滚动，false：竖向滚动
            wheelScrollDuration: 0,//滚动速度
            mode: 'native',
            sizeStrategy: 'percent',
            detectResize: true
          },
          scrollPanel: {
            scrollingX: false,//启用横屏滚动
            scrollingY: true,//关闭竖向滚动
          },
          rail: {
            background: '#e5ebf1',
            opacity: 1,
            size: '6px',
            borderRadius: '6px',
            gutterOfEnds: '60px',//轨道距 x 和 y 轴两端的距离
            gutterOfSide: '-10px'//距离容器的距离
          },
          bar: {
            onlyShowBarOnScroll: false,//是否只在滚动时显示bar
            background: '#cbd5df',
            keepShow: true,
            size: '4px',
            minSize: false
          }
        },//滚动配置
        ops2: {
          vuescroll: {
            wheelDirectionReverse: false,//true：横向滚动，false：竖向滚动
            wheelScrollDuration: 0,//滚动速度
            mode: 'native',
            sizeStrategy: 'percent',
            detectResize: true
          },
          scrollPanel: {
            scrollingX: false,//启用横屏滚动
            scrollingY: true,//关闭竖向滚动
          },
          rail: {
            background: '#e5ebf1',
            opacity: 1,
            size: '6px',
            borderRadius: '6px',
            gutterOfEnds: '60px',//轨道距 x 和 y 轴两端的距离
            gutterOfSide: '10px'//距离容器的距离
          },
          bar: {
            onlyShowBarOnScroll: false,//是否只在滚动时显示bar
            background: '#cbd5df',
            keepShow: true,
            size: '4px',
            minSize: false
          }
        },//滚动配置
        userSummary:{},//个人情况周总结
        companySummary:{},//公司情况周总结
        projectProgress:{},//项目进展数据
        projectProgressByUser:{},//管辖下的项目进展
      }
    },
    created(){
      this.queryUserSummary();
      this.queryCompanySummary();
      this.queryProjectProgress();
      this.queryProjectProgressByUser();
    },
    methods:{
      //个人情况周总结
      queryUserSummary(){
        this.$http.get('task/task/count/userSummary',{
          params:{
            userId:this.$store.state.userInfo.userId,
            companyId:this.$store.state.userInfo.companyId,
          }
        }).then(res=>{
          if(res.statusCode==200){
            this.userSummary=res.data;
          }else{
            this.$message.error(res.statusMsg);
          }
        })
      },
      //公司情况周总结
      queryCompanySummary(){
        this.$http.get('task/task/count/companySummary',{
          params:{
            companyId:this.$store.state.userInfo.companyId,
          }
        }).then(res=>{
          if(res.statusCode==200){
            this.companySummary=res.data;
          }else{
            this.$message.error(res.statusMsg);
          }
        })
      },
      //对比上周，公司项目新进展数据
      queryProjectProgress(){
        this.$http.get('project/project/count/projectProgress',{
          params:{
            companyId:this.$store.state.userInfo.companyId,
          }
        }).then(res=>{
          if(res.statusCode==200){
            this.projectProgress=res.data;
          }else{
            this.$message.error(res.statusMsg);
          }
        })
      },
      //查询管辖项目下的进度
      queryProjectProgressByUser(){
        this.$http.get('project/project/count/projectProgress',{
          params:{
            userId:this.$store.state.userInfo.userId,
            companyId:this.$store.state.userInfo.companyId,
          }
        }).then(res=>{
          if(res.statusCode==200){
            this.projectProgressByUser=res.data;
          }else{
            this.$message.error(res.statusMsg);
          }
        })
      },
    }
  }
</script>

<style scoped type="text/scss" lang="scss">
  .month_details {
    width: 100%;
    height: 100%;

    .back {
      height: 64px;
      box-sizing: border-box;
      padding-top: 18px;
      padding-bottom: 32px;
      color: #454A55;
      font-size: 14px;

      > span {
        color: #96A2AA;
        margin-right: 33px;
        cursor: pointer;
      }
    }

    > .content {
      height: calc(100% - 64px);

      .content_top {
        width: 100%;
        height: 246px;
        border-radius: 6px;
        background-image: url("../../../../assets/img/smart/workBriefing/pic_bg_orange.png");
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        padding-left: 80px;
        padding-right: 180px;
        overflow: hidden;

        .userInfo {
          float: left;
          padding-top: 90px;
          overflow: hidden;

          .head-img {
            float: left;
            width: 64px;
            height: 64px;
            background-color: #F2F6F9;
            border-radius: 6px;
          }

          .info {
            float: left;
            color: #ffffff;
            padding-left: 25px;
            padding-top: 5px;

            > h3 {
              font-size: 20px;
              padding-bottom: 15px;
              font-weight: bold;
            }

            > p {
              font-size: 16px;
            }
          }
        }
        .data-list{
          margin-top: 90px;
          float: right;
          width: 600px;
          height: 55px;
          .list{
            display: flex;
            color: #ffffff;
            li{
              flex: 1;
              text-align: center;
            }
          }
        }
      }

      .content_middle {
        margin-top: 16px;
        overflow: hidden;

        .left {
          float: left;
          width: calc((100% - 16px) / 2);
          margin-right: 16px;

          > .tips {
            height: 120px;
            line-height: 30px;
            border-radius: 6px;
            color: #FFFFFF;
            font-size: 16px;
            text-align: center;
            background-image: url("../../../../assets/img/smart/workBriefing/pic_bg_blue.png");
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            position: relative;
            padding: 0 90px;
            padding-top:45px;

            span {
              position: absolute;
              background-image: url("../../../../assets/img/smart/workBriefing/ic_lb.png");
              width: 87px;
              height: 90px;
              left: 0;
              bottom: 0;
            }
          }

          > .content {
            background-color: #ffffff;
            margin-top: 16px;
            border-radius: 6px;

            > .title {
              color: #454A55;
              font-size: 16px;
              font-weight: bold;
              line-height: 80px;
              padding-left: 32px;
            }

            > .sub_title_list {
              display: flex;
              background-color: #F2F6F9;
              height: 50px;
              line-height: 50px;
              text-align: center;

              > li {
                flex: 1;
                text-align: center;
              }
            }

            > .scroll-box {
              height: 630px;

              .info-list {
                display: flex;
                color: #454A55;
                font-size: 14px;
                text-align: center;
                line-height: 50px;

                li {
                  flex: 1;
                }
              }
            }
          }
        }

        .right {
          float: left;
          width: calc((100% - 16px) / 2);

          .board {
            height: 440px;
            background-color: #ffffff;
            border-radius: 6px;

            > .title {
              font-size: 16px;
              font-weight: bold;
              color: #454A55;
              padding-left: 32px;
              line-height: 80px;
            }

            > .sub_title_list {
              line-height: 50px;
              background-color: #F2F6F9;
              color: #96A2AA;
              font-size: 14px;
              text-align: center;
              display: flex;

              li {
                flex: 1;
              }
            }

            > .info_list {
              line-height: calc(230px / 4);
              display: flex;
              text-align: center;
              font-size: 14px;
              color: #454A55;

              li {
                flex: 1;
              }
            }

            > .tips {
              padding: 0 32px;

              > .tips-inner {
                text-indent: 32px;
                line-height: 80px;
                border-top: 1px solid #EEEEEE;
                font-size: 14px;
                position: relative;
                i {
                  position: absolute;
                  background-image: url("../../../../assets/img/smart/workBriefing/ic_hb_yq.png");
                  background-position: center;
                  background-repeat: no-repeat;
                  background-size: cover;
                  width: 12px;
                  height: 12px;
                  left: 0;
                  top: 34px;
                }
              }
            }
          }
        }
      }

      .content_bottom {
        margin-top: 16px;
        background-color: #ffffff;
        border-radius: 6px;

        > .title {
          line-height: 80px;
          padding-left: 32px;
          font-size: 16px;
          color: #454A55;
          font-weight: bold;
        }

        > .sub_title_list {
          display: flex;
          background-color: #F2F6F9;
          line-height: 50px;
          color: #96A2AA;
          font-size: 14px;

          > li {
            flex: 1;
            text-align: center;
          }
        }

        > .info-list {
          display: flex;
          line-height: 50px;
          color: #454A55;
          font-size: 14px;

          > li {
            flex: 1;
            text-align: center;
          }
        }
      }
    }
    .top_icon{
      display: inline-block;
      background-image: url("../../../../assets/img/smart/workBriefing/ic_up.png");
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      width: 8px;
      height: 20px;
      margin-right: 8px;
    }
    .top_color{
      color: #0A52E4;
    }
    .bottom_color{
      color: #FF8F2B;
    }
    .bottom_icon{
      margin-right: 8px;
      display: inline-block;
      background-image: url("../../../../assets/img/smart/workBriefing/ic_down.png");
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      width: 8px;
      height: 20px;
    }
    .middle_icon{
      display: inline-block;
      background: #96A2AA;
      width: 14px;
      height: 2px;
      margin-right: 8px;
    }

  }
</style>
